
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<script type="text/javascript"
	src="js/jquery-easyui-1.3.5/jquery.min.js" charset="UTF-8"></script>
<script type="text/javascript"
	src="js/jquery-easyui-1.3.5/jquery.easyui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/mine.js" charset="UTF-8"></script>
<link rel="stylesheet"
	href="js/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="js/jquery-easyui-1.3.5/themes/icon.css"
	type="text/css"></link>
<script type="text/javascript"
	src="js/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"
	charset="UTF-8"></script>

<title>登录界面</title>
<style type="text/css">
form {
	width: 523px;
	height: 324px;
	margin: auto;
	margin-top: 150px;
	background-image: url(images/login.png);
	border: 1px #e0ecff solid;
}

table {
	margin: 0 auto;
	margin-top: 120px;
}

select,#user,#pass,#ID {
	width: 120px;
}

.tip {
	color: #F00;
	font-size: 12px;
}
</style>
</head>

<body style="background-color: #e0ecff;">
	<form id="login" >
		<!--登录界面-->
		<input type="hidden" name="action" value="login" />
		<table>
			<tr>
				<td><label for="user">用户名</label></td>
				<td><input type="text" name="username" id="user" /></td>
				<td class="tip"></td>
			</tr>
			<tr>
				<td><label for="pass">密码</label></td>
				<td><input type="password" name="password" id="pass" /></td>
				<td class="tip"></td>
			</tr>
			<tr>
				<td><label for="ID">角色</label></td>
				<td class="tip"><select name="role" id="role">
						<option value="admin">管理员</option>
						<option value="teacher">教师</option>
						<option value="student">学生</option>
				</select></td>
				<td></td>
			</tr>
			<tr>
				<td><input type="submit" value="确认登录" style="margin-top: 10px;" /></td>
				<td><input type="reset" value="清空重置"
					style="margin-left: 35px; margin-top: 10px;" /></td>
				<td></td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		var user = $("#user").val();
		var pass = $("#pass").val();
		var ID = $("#ID").val();
		$("#user,#pass,#ID").blur(
				function() {
					if ($(this).val() == '') {
						$(this).parent().next().html(
								'请输入' + $(this).parent().prev().text());
					} else {
						$(this).parent().next().html('');
					}
				})
		/*提交验证，异步传输*/
		$("form").submit(function() {
			if ($("#user").val() == '' || $("#pass").val() == '') {
				return false;
			} else {
				$.ajax({
					url : 'servlet/LoginServlet', //处理测试页面,注意返回内容，成功返回OK
					dataType : 'json',
					type:'post',
					data : $("form").serialize(),
					success : function(r) {
						if (r && r.success) {
							window.location.href="main.jsp";
						} else {
							$.messager.alert('登录失败', r.msg);
						}
					}
				});
			}
			return false;
		});
	</script>

</body>
</html>
